react js Container Presentational Pattern 코드를 한 파일에 전부 작성하면 굉장히 길어져 가독성이 떨어져 오류가 생겨도 찾기 힘들고 특히 협업을 할 때 효율성이 떨어질 것이다. 이를 방지하지 위해 코드의 역할에 따라 파일을 나누어 놓는 것을 Container/ Presentational 패턴이라고 한다. React 코드를 살펴보면 JS(기능)부분과 JSX(UI)부분으로 나누어진다. 이 때, JS부분을 container 파일로, JSX... react jsnext jsnext js useState prev React-hook 중 하나인 useState를 하나의 함수에서 여러번 사용할 경우 원하는대로 결과가 안나오는 문제가 생길 수 있다. 아래는 카운트 값에 1,3,5,7을 차례대로 올려 결론적으로 버튼을 한 번 누르면 16이 오르길 바라고 만든 코드이다. 하지만 실제로 작동을 시켜보면 16이 아니라 7이 오른다. 받아오는 count 값이 +1,+3,+5가 된 값이 아니라 처음상태인 0에서 받아... useStatereact jsreact js State Lifting React는 데이터의 흐름이 양방향이 아니라 단방향이다. 한 컴포넌트에서 사용하고 있는 것을 부모컴포넌트 또는 형제컴포넌트에서는 사용할 수 없다. 그렇기 때문에 두 형제컴포넌트에서 같이 사용하고 싶은 기능이 있다면 그 부모 컴포넌트에 코드를 작성하고 props를 이용해 각 자식컴포넌트에서 사용해야 한다. 자식2에서는 부모에 있는 1씩 올라가는 기능을 그대로 가져와 사용했고(props 이용) ... useStatereact jsPropsState LiftingProps [React] useLayoutEffect() React Hooks LifeCycle을 보면 마지막에 useEffect()와 useLayoutEffect()가 있습니다. Function Component에서는 주로 useEffect()를 사용합니다. 그렇다면 useLayoutEffect()는 무엇이며, useEffect()와 어떤 차이가 있을까요? useEffect() render가 완료된 Component가 화면에 출력이 된 후 use... react jsreact js React 01. 시작하기 최근 React를 공부하기 시작했다. 블로그에는 내가 구글링, 유튜브를 통해서 배운 것들에 대해서 좀 정리 해보려고 한다. 혹시라도 나와 같이 React를 처음 시작하는 사람이 있다면 이 글이 조금이나마 도움이 될 수 있으면 좋겠다. 1. create-react-app React 공식문서를 보면 몇가지 React app을 시작하는 방법이 있는데 나는 그 중에서 create-react-app이... React리액트react jsReact [React JS] #Hooks 3 useAxios.js Index.js... react jsreact js [React JS] #Hooks 1 Class component가 아닌 function component에서도 state를 사용할 수 있도록 도와주는 역할 사용자가 정의할 수 있는 라이브러리 State를 사용하면서도 함수형 프로그래밍을 할 수 있도록 지원함. useState() returns state and set function in array... react jsreact js [Redux] #1 Vanilla 자바스크립트의 state를 관리하는 package (React와는 별개이다) 바닐라, Angular, View, React 여러 곳에서 사용가능하다. 필요 배경 지식: HTML, CSS, Vanilla JS, React, Hooks state: app 안에서 바뀌는 데이터 html에게 js 요소가 바뀌는 것을 전달하는 것에 사용하는 것만으로도 이득이다. reducer: data를 수정하는 f... react jsreact js
Container Presentational Pattern 코드를 한 파일에 전부 작성하면 굉장히 길어져 가독성이 떨어져 오류가 생겨도 찾기 힘들고 특히 협업을 할 때 효율성이 떨어질 것이다. 이를 방지하지 위해 코드의 역할에 따라 파일을 나누어 놓는 것을 Container/ Presentational 패턴이라고 한다. React 코드를 살펴보면 JS(기능)부분과 JSX(UI)부분으로 나누어진다. 이 때, JS부분을 container 파일로, JSX... react jsnext jsnext js useState prev React-hook 중 하나인 useState를 하나의 함수에서 여러번 사용할 경우 원하는대로 결과가 안나오는 문제가 생길 수 있다. 아래는 카운트 값에 1,3,5,7을 차례대로 올려 결론적으로 버튼을 한 번 누르면 16이 오르길 바라고 만든 코드이다. 하지만 실제로 작동을 시켜보면 16이 아니라 7이 오른다. 받아오는 count 값이 +1,+3,+5가 된 값이 아니라 처음상태인 0에서 받아... useStatereact jsreact js State Lifting React는 데이터의 흐름이 양방향이 아니라 단방향이다. 한 컴포넌트에서 사용하고 있는 것을 부모컴포넌트 또는 형제컴포넌트에서는 사용할 수 없다. 그렇기 때문에 두 형제컴포넌트에서 같이 사용하고 싶은 기능이 있다면 그 부모 컴포넌트에 코드를 작성하고 props를 이용해 각 자식컴포넌트에서 사용해야 한다. 자식2에서는 부모에 있는 1씩 올라가는 기능을 그대로 가져와 사용했고(props 이용) ... useStatereact jsPropsState LiftingProps [React] useLayoutEffect() React Hooks LifeCycle을 보면 마지막에 useEffect()와 useLayoutEffect()가 있습니다. Function Component에서는 주로 useEffect()를 사용합니다. 그렇다면 useLayoutEffect()는 무엇이며, useEffect()와 어떤 차이가 있을까요? useEffect() render가 완료된 Component가 화면에 출력이 된 후 use... react jsreact js React 01. 시작하기 최근 React를 공부하기 시작했다. 블로그에는 내가 구글링, 유튜브를 통해서 배운 것들에 대해서 좀 정리 해보려고 한다. 혹시라도 나와 같이 React를 처음 시작하는 사람이 있다면 이 글이 조금이나마 도움이 될 수 있으면 좋겠다. 1. create-react-app React 공식문서를 보면 몇가지 React app을 시작하는 방법이 있는데 나는 그 중에서 create-react-app이... React리액트react jsReact [React JS] #Hooks 3 useAxios.js Index.js... react jsreact js [React JS] #Hooks 1 Class component가 아닌 function component에서도 state를 사용할 수 있도록 도와주는 역할 사용자가 정의할 수 있는 라이브러리 State를 사용하면서도 함수형 프로그래밍을 할 수 있도록 지원함. useState() returns state and set function in array... react jsreact js [Redux] #1 Vanilla 자바스크립트의 state를 관리하는 package (React와는 별개이다) 바닐라, Angular, View, React 여러 곳에서 사용가능하다. 필요 배경 지식: HTML, CSS, Vanilla JS, React, Hooks state: app 안에서 바뀌는 데이터 html에게 js 요소가 바뀌는 것을 전달하는 것에 사용하는 것만으로도 이득이다. reducer: data를 수정하는 f... react jsreact js